<template>
	<view class="s-countdown_box" :style="boxstyle">
		<view class="s-countdown_title" :style="titlestyle" v-if="texttime">{{texttime}}</view>
		<view class="s-countdown_time" :style="bgstyle">{{times[0]||'00'}}</view>
		<text :style="txtstyle">:</text>
		<view class="s-countdown_time" :style="bgstyle">{{times[1]||'00'}}</view>
		<text :style="txtstyle">:</text>
		<view class="s-countdown_time" :style="bgstyle">{{times[2]||'00'}}</view>
	</view>
</template>

<script>
	export default {
		name:"s-count-down-time",
		props: {
			bgColor: { type: String,default: '#f5a84e' },// 时间背景颜色
			txtColor: { type: String,default: '#fff' },// 时间文字颜色
			titleColor: { type: String,default: '#000' },// 左边文字颜色
			size: { type: String,default: '' },// 时间尺寸大小
			timeStart: { type: Number,default: 0 },// 时间戳开始
			timeEnd: { type: Number,default: 0 },// 时间戳结束
		},
		data() {
			return {
				times:['00','00','00'],
				time_now:0,
			}
		},
		created() {
			this.setTime();
		},
		computed: {
			texttime: function(){
				let txt = '';
				const {timeStart,timeEnd,time_now} = this;
				if(timeStart == 0 || timeEnd == 0 || time_now == 0){
					this.times = ['00','00','00'];
					txt = ' ';
					return txt;
				}
				if(timeStart >= timeEnd){
					this.times = ['00','00','00'];
					txt = '时间不合法';return txt;
				}else{
					if(time_now<=timeStart){
						txt = '距开始:';
						this.SetTimeTxt(timeStart - time_now,1)
					}else if(time_now > timeStart && time_now < timeEnd){
						txt = '距结束:';
						this.SetTimeTxt(timeEnd - time_now,2)
					}else{
						txt = '已结束:';
						this.times = ['00','00','00'];
					}
				}
				return txt; 
			},
			boxstyle: function(){
				let style = `"font-size":${this.size =='big'?"40rpx":"28rpx"};
					height:${this.size =='big'?"70rpx":"50rpx"};`
				return style; 
			},
			bgstyle: function(){
				let style = `background:${this.bgColor};color:${this.txtColor};`
				return style; 
			},
			txtstyle: function(){
				let style = `color:${this.bgColor}`
				return style; 
			},
			titlestyle: function(){
				let style = `color:${this.titleColor}`
				return style; 
			}
		},
		methods: {
			setTime(){
				this.time_now = new Date().getTime();
				setTimeout(()=>{
					this.setTime();
				},1000)
			},
			SetTimeTxt(ts,type) {
				let t = this;
				if(ts/1000 < 1){
					t.times = ['00','00','00'];
					this.$emit("end", type);
					return;
				}
			    var hh = parseInt(ts / 1000 / 60 / 60, 10); //计算剩余的小时数
			    var mm = parseInt(ts / 1000 / 60 % 60, 10); //计算剩余的分钟数
			    var ss = parseInt(ts / 1000 % 60, 10); //计算剩余的秒数
			    hh = t.checkTime(hh);
			    mm = t.checkTime(mm);
			    ss = t.checkTime(ss);
				t.times = [hh,mm,ss];
			},
			checkTime(i) {
			    if (i < 10) { i = "0" + i; }
			    return i;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.s-countdown{
		&_box{
			display: inline-flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 28rpx;
			text{
				display: block;
				margin: 0 6rpx;
			}
		}
		&_title{
			display: block;
			margin-right: 10rpx;
		}
		&_time{
			display: flex;
			align-items: center;
			padding: 0 10rpx;
			border-radius: 6rpx;
			height: 100%;
		}
	}
</style>
